<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html"
      xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html"
      xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
    <head>
        <title>LOOKWIDER.COM</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <link rel="stylesheet" type="text/css" href="reset.css" />
        <link rel="stylesheet" type="text/css" href="metrostyle/css/modern.css"/>
        <link rel="stylesheet" type="text/css" href="metrostyle/css/modern-responsive.css"/>
        <link rel="stylesheet" href="chosen/chosen.css">
        <link rel="stylesheet" href="graphics/morris/morris.css"/>

        <script type="text/javascript" src="js/jquery.js"></script>
        <script src="chosen/chosen.js" type="text/javascript"></script>
        <script type="text/javascript"src="graphics/raphael.js"></script>
        <script type="text/javascript"src="graphics/morris/morris.js"></script>
        <script type="text/javascript" src="metrostyle/javascript/dropdown.js"></script>
        <script type="text/javascript" src="metrostyle/javascript/accordion.js"></script>
        <script type="text/javascript" src="metrostyle/javascript/buttonset.js"></script>
        <script type="text/javascript" src="metrostyle/javascript/carousel.js"></script>
        <script type="text/javascript" src="metrostyle/javascript/input-control.js"></script>
        <script type="text/javascript" src="metrostyle/javascript/pagecontrol.js"></script>
        <script type="text/javascript" src="metrostyle/javascript/rating.js"></script>
        <script type="text/javascript" src="metrostyle/javascript/slider.js"></script>
        <script type="text/javascript" src="metrostyle/javascript/tile-slider.js"></script>
        <script type="text/javascript" src="metrostyle/javascript/tile-drag.js"></script>
        <script type="text/javascript" src="edeploy/tiledeploy.js"></script>




    </head>
    <body class="modern-ui" onload="prettyPrint()" style="zoom: 1;">

    <div class="topbar">
        <div class="nav-bar bg-color-lighten">

        <div class="nav-bar-inner padding10">
           <span class="pull-menu"></span>
            <a href="index.html">
                <span class="element brand"><img src="FrameElements/SecondTopBar/LOOKWIDERCOM.png"/></span>
            </a>
            <div class="divider"></div>
            <ul class="menu">

                <li>
                    <a href="settings.html" style="color: black;">Моя Страница</a>
                </li>
                <li>
                    <a href="messages.html" style="color: black;">Сообщения</a>
                </li>
                <li>
                    <a href="#" style="color: black;">Выйти</a>
                </li>
                <li style="color: black; margin-left: 350px;">
                    <!-- TODO insert chosen plugin (selectbox already has class)-->
                    <select data-placeholder="Житомир" style="width:350px;" class="chzn-select" tabindex="5">
                        <option value=""></option>
                        <optgroup label="Украина">
                            <option>Житомир</option>
                            <option>Киев</option>
                            <option>Днепропетровс</option>
                            <option>Харьков</option>
                        </optgroup>
                                <optgroup label="Россия">
                                    <option>Москва</option>
                                    <option>Санкт-Петербург</option>
                                    <option>Воронеж</option>
                                    <option>Новосибирск</option>
                                </optgroup>
                                </select>

                </li>
                <li><a/></li>
                <li class="divider"></li>
                <li><a /></li>
            </ul>

        </div>
            </div>

    </div>

<div class="clearfix"></div>
    <div class="sidebar">
        <div class="span3 bg-color-blue" style="line-height: 36px;"><a href="#"> &nbsp + Заведение</a>

        </div>
        <div class="span3 bg-color-green" style="line-height: 36px;"><a href="#"> &nbsp + Резидент</a>

        </div>
        <div class="span3 bg-color-purple" style="line-height: 36px;"><a href="#"> &nbsp + Квест</a>

        </div>



    </div>

    <div class="contentframe">

        <div class="topbar bg-color-blueLight " style="padding-top:5px;" data-param-period="15000">


            <div class="input-control text span4" style="float: left; margin-left: 100px;">
                <input type="text" class="with-helper" />
                <button class="helper"></button>
            </div>
            <input type="submit" value="Искать"/>
            <div class="clearfix"></div>
        </div>

<div class="span13 bg-color-blueLight">
   <img src="FrameElements/SideBar/avatarful.jpg" style="padding: 10px; float: left;">  <h2 style="font-weight: bold;font-style: italic; margin-left: 50px;">Ололо Люсевич</h2>
 <table style="width: 30%; float: right; margin-top: -50px;">

    <tr>
        <td style="border: none;">
           <button class="default bg-color-blue"style="width: 100%; font-size: 0.92em;">Изменить Личные Данные</button>
        </td>
    </tr>
    <tr>
        <td style="border: none;">
            <div class="upload"><input type="file"/></div>
        </td>
    </tr>
</table>
<table class="personaldata">
    <tr><td>Дата рождения: 28.02.2012</td>
        <td>Номер телефона: 066 613 66 61</td>
    </tr>

    <tr><td style="width: 40%;"><a href="placepage.html"><h3>Работа Официант в: Кабак "Кузька"</h3></a></td>
    <td>c 12.12.2012</td></tr>
    </table>
</div>
        <div class="page-control" data-role="page-control">
            <span class="menu-pull"></span>
            <div class="menu-pull-bar"></div>
            <ul>
                <li><a href="#author">Автор</a></li>
                <li class="active"><a href="#resident">Резидент</a></li>




            </ul>

            <div class="frames bg-color-blue" style="height: 700px;">





                <div class="frame" id="author">

                    <div class="arrowbtnclose" style="float: left;"><a href="#"><i class="icon-arrow-left-3 fg-color-white" style="font-size: 45px;"></i></a></div>
                    <ul class="proflist" style="height: 550px;">
                        <li><a href="profpage.html">Рестораны</a></li>
                        <li><a href="profpage.html">Кафе</a></li>
                        <li><a href="profpage.html">Пабы</a></li>
                        <li><a href="profpage.html">Бары</a></li>
                        <li><a href="profpage.html">Пиццерии</a></li>

                    </ul>
                    <div class="clearfix"></div>
                    <div class="arrowbtnclose" style="margin-top: 70px;float: right;"><a href="#"><i class="icon-arrow-up-left fg-color-white"></i> </a> </div>

                </div>
                <div class="frame active" id="resident">
                    <table class="nav-menu">
                        <tr>
                            <!-- TODO Align text center (margin:auto doesn't work!)-->
                            <td class="nav-menu-item bg-color-blue" id="selected">Поесть, Посидеть</td>
                            <td class="nav-menu-item" style="background-color: #008800;" onmouseover="this.style.backgroundColor='#00a300'" onmouseout="this.style.backgroundColor='#008800'">
                                <a href="#">Покупки</a>
                            </td>
                            <td class="nav-menu-item" style="background-color: #3F3F3F;" onmouseover="this.style.backgroundColor='#525252'" onmouseout="this.style.backgroundColor='#3F3F3F'">
                                <a href="#">Авто</a>
                            </td>
                            <td class="nav-menu-item" style="background-color: #493293;" onmouseover="this.style.backgroundColor='#603cba'" onmouseout="this.style.backgroundColor='#493293'">
                                <a href="#">Отдых</a>
                            </td>
                            <td class="nav-menu-item"style="background-color: #8B1B37;"onmouseover="this.style.backgroundColor='#b91d47'" onmouseout="this.style.backgroundColor='#8B1B37'">
                                <a href="#">Медицина</a>
                            </td>
                        </tr>
                    </table>
                    <div class="clearfix"></div>
                    <h3>Рейтинги и Карма в рубрике: Поесть, посидеть</h3>
                    <div class="karma" style="margin: 0;">111911</div>
                    <div class="clearfix"></div>
                    <table style="width: 70%; margin-top: 50px;">
                        <tr>
                            <td>1. Профессионализм</td><td><div class="rating"data-role="rating" data-param-vote="off" data-param-rating="4"style="float: left;"></div></td>
                        </tr>
                        <tr>
                            <td>2. Опрятность</td><td><div class="rating"data-role="rating" data-param-vote="off" data-param-rating="2"style="float: left;"></div></td>
                        </tr>
                        <tr>
                            <td>3. Харизма</td><td><div class="rating"data-role="rating" data-param-vote="off" data-param-rating="5"style="float: left;"></div></td>
                        </tr>

                    </table>
                    <ul class="accordion dark span13" data-role="accordion">
                       <li class="active">
                            <a href="#">График роста рейтинга</a>
                            <div>
                                <div class="bg-color-lighten" id="myfirstchart" style="height: 250px;"></div>

                            </div>
                        </li>
                    </ul>


                </div>

            </div>
        </div>














        <div class="topbar" style="text-align: right;">
            ©2012-2013 LOOKWIDER.COM
        </div>

</div>

    </body>
    <script type="text/javascript">
        $(".chzn-select").chosen();
        $(".chzn-select-deselect").chosen({allow_single_deselect:true});
    </script>
    <script>
        new Morris.Line({
            // ID of the element in which to draw the chart.
            element: 'myfirstchart',
            // Chart data records -- each entry in this array corresponds to a point on
            // the chart.
            data: [
                { month: '2012-02', Профессионализм: 5, Опрятность:3, Харизма: 4},
                { month: '2012-03', Профессионализм: 2, Опрятность:4, Харизма: 4 },
                { month: '2012-04', Профессионализм: 3, Опрятность:4, Харизма: 4 },
                { month: '2012-05', Профессионализм: 5, Опрятность:2, Харизма: 5 },
                { month: '2012-06', Профессионализм: 2, Опрятность:5, Харизма: 5 }
            ],
            // The name of the data record attribute that contains x-values.
            xkey: 'month',
            // A list of names of data record attributes that contain y-values.
            ykeys: ['Профессионализм', 'Опрятность','Харизма'],
            // Labels for the ykeys -- will be displayed when you hover over the
            // chart.
            labels: ['Профессионализм','Опрятность','Харизма'],
            xLabels: ["month"]
        });
    </script>
</html>
